<template>
  <div class="user-profile-container">
    <h1 class="page-title">个人中心</h1>
    
    <!-- 未登录提示 -->
    <el-alert
      v-if="!isLoggedIn"
      title="您当前未登录，无法查看个人信息"
      type="info"
      description="请登录以访问您的个人中心、订单和电子票信息"
      show-icon
      :closable="false"
      style="margin-bottom: 20px">
      <template #default>
        <div class="login-actions">
          <el-button type="primary" @click="goToLogin">立即登录</el-button>
        </div>
      </template>
    </el-alert>
    
    <!-- 未登录时的内容 -->
    <el-card v-if="!isLoggedIn" class="not-logged-in-card">
      <el-empty 
        description="您需要登录才能查看个人中心内容" 
        :image-size="200">
        <template #default>
          <el-button type="primary" @click="goToLogin">立即登录</el-button>
        </template>
      </el-empty>
    </el-card>

    <el-row v-else :gutter="20">
      <!-- 左侧用户信息卡片 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6">
        <el-card class="user-card">
          <div class="user-header">
            <el-avatar :size="100" :src="userInfo.avatar || defaultAvatar" class="user-avatar"></el-avatar>
            <h2 class="username">{{ userInfo.username || '未登录' }}</h2>
            <p class="user-role">{{ getRoleName(userInfo.role) }}</p>
          </div>
          
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ userStats.ordersCount || 0 }}</span>
              <span class="stat-label">订单总数</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userStats.ticketsCount || 0 }}</span>
              <span class="stat-label">电子票数</span>
            </div>
          </div>
          
          <div class="action-buttons">
            <el-button type="primary" @click="editProfile">编辑资料</el-button>
            <el-button @click="changePassword">修改密码</el-button>
          </div>
        </el-card>
        
        <el-card class="menu-card">
          <el-menu
            :default-active="activeMenuItem"
            class="user-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="profile">
              <el-icon><User /></el-icon>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="orders">
              <el-icon><List /></el-icon>
              <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="tickets">
              <el-icon><Ticket /></el-icon>
              <span>我的电子票</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <!-- 右侧内容区域 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <!-- 基本资料 -->
        <el-card v-if="activeMenuItem === 'profile'" class="content-card">
          <template #header>
            <div class="card-header">
              <h3>基本资料</h3>
            </div>
          </template>
          
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="真实姓名">{{ userInfo.realName || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ getGenderText(userInfo.gender) }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ userInfo.email || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ maskPhone(userInfo.phone) || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="生日">{{ userInfo.birthday || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{ userInfo.address || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="职业">{{ userInfo.profession || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="个人简介">{{ userInfo.bio || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="用户角色">{{ getRoleName(userInfo.role) }}</el-descriptions-item>
            <el-descriptions-item label="注册时间">{{ formatDate(userInfo.createTime) }}</el-descriptions-item>
            <el-descriptions-item label="最后登录">{{ formatDate(userInfo.lastLoginTime) }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 我的订单 -->
        <el-card v-if="activeMenuItem === 'orders'" class="content-card">
          <template #header>
            <div class="card-header">
              <h3>我的订单</h3>
              <el-button type="primary" size="small" plain @click="router.push('/front/user/orders')">
                查看全部订单
              </el-button>
            </div>
          </template>
          
          <div v-if="orders.length === 0" class="empty-data">
            <el-empty description="暂无订单数据">
              <template #description>
                <p class="empty-description">您还没有下过订单哦~</p>
              </template>
              <el-button type="primary" @click="router.push('/front/event/list')">去浏览活动</el-button>
            </el-empty>
          </div>
          <el-table v-else :data="orders" style="width: 100%" :highlight-current-row="true">
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="eventName" label="活动名称"></el-table-column>
            <el-table-column prop="totalAmount" label="金额" width="100">
              <template #default="scope">
                <span class="price-text">¥{{ scope.row.totalAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="180">
              <template #default="scope">
                {{ formatDate(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button link type="primary" @click="viewOrder(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialog" title="修改密码" width="400px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialog = false">取消</el-button>
          <el-button type="primary" @click="submitPasswordChange">确认修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑资料对话框 -->
    <el-dialog v-model="profileDialog" title="编辑个人资料" width="500px">
      <el-form :model="profileForm" :rules="profileRules" ref="profileFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="profileForm.username" placeholder="请输入用户名"></el-input>
          <div class="form-tip">修改用户名后需要重新登录系统</div>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="profileForm.realName" placeholder="请输入真实姓名"></el-input>
          <div class="form-tip">用于购票凭证和实名认证</div>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="profileForm.gender" placeholder="请选择性别">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
            <el-option label="保密" value="secret"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="profileForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="profileForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker 
            v-model="profileForm.birthday" 
            type="date" 
            placeholder="请选择生日"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="个人简介" prop="bio">
          <el-input 
            v-model="profileForm.bio" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入个人简介">
          </el-input>
          <div class="form-tip">最多200字</div>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-input v-model="profileForm.avatar" placeholder="请输入头像URL链接"></el-input>
          <div class="form-tip">暂不支持直接上传图片，请输入图片链接</div>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="profileForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="职业" prop="profession">
          <el-input v-model="profileForm.profession" placeholder="请输入职业"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="profileDialog = false">取消</el-button>
          <el-button type="primary" @click="submitProfileUpdate" :loading="updateLoading">保存修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, onBeforeMount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, List, Ticket } from '@element-plus/icons-vue'
import { useFrontUserStore } from '@/store/frontUser'
import { getFrontUserDetail, updateFrontUserProfile, changeFrontUserPassword } from '@/api/frontUser'

const router = useRouter()
const route = useRoute()
const frontUserStore = useFrontUserStore()
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

// 登录状态
const isLoggedIn = computed(() => {
  return !!localStorage.getItem('frontToken')
})

// 用户信息
const userInfo = ref({})
const userStats = ref({
  ordersCount: 0,
  ticketsCount: 0
})

// 活动和订单数据
const orders = ref([])

// 激活的菜单
const activeMenuItem = ref('profile')

// 密码修改对话框相关
const passwordDialog = ref(false)
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const passwordRules = {
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 编辑资料对话框相关
const profileDialog = ref(false)
const profileFormRef = ref(null)
const updateLoading = ref(false)
const profileForm = reactive({
  username: '',
  realName: '',
  gender: 'secret',
  email: '',
  phone: '',
  birthday: '',
  bio: '',
  avatar: '',
  address: '',
  profession: '',
  interests: ''
})
const profileRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
  ],
  realName: [{ max: 20, message: '真实姓名不超过20个字符', trigger: 'blur' }],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  bio: [{ max: 200, message: '个人简介不超过200个字符', trigger: 'blur' }],
  address: [{ max: 100, message: '地址不超过100个字符', trigger: 'blur' }],
  profession: [{ max: 50, message: '职业不超过50个字符', trigger: 'blur' }],
  interests: [{ max: 100, message: '兴趣爱好不超过100个字符', trigger: 'blur' }]
}

// 在组件挂载前检查登录状态
onBeforeMount(() => {
  // 检查是否有前台token
  const frontToken = localStorage.getItem('frontToken')
  if (!frontToken) {
    // 不再强制重定向，而是显示登录提示
    console.log('用户未登录，将显示登录提示')
  }
})

// 获取用户信息
onMounted(() => {
  // 检查登录状态
  const frontToken = localStorage.getItem('frontToken')
  
  // 如果未登录，显示登录提示，不再重定向
  if (!frontToken) {
    userInfo.value = { username: '游客', role: 'guest' }
    return
  }
  
  // 从localStorage获取前台用户信息
  const storedUserInfo = localStorage.getItem('frontUserInfo')
  if (storedUserInfo) {
    try {
      userInfo.value = JSON.parse(storedUserInfo)
      
      // 这里应该调用后端API获取完整的用户信息、统计数据、订单和活动列表
      // 模拟数据
      fetchUserData()
    } catch (e) {
      console.error('解析用户信息失败', e)
      ElMessage.error('获取用户信息失败')
    }
  } else if (frontToken) {
    // 有token但无用户信息，可能需要重新获取用户信息
    ElMessage.warning('获取用户信息失败，请重新登录')
    frontUserStore.resetState() // 清除可能无效的token
    router.push('/front/login')
  }
})

// 获取用户数据（实际API请求）
const fetchUserData = async () => {
  try {
    // 获取用户详细信息
    const userDetailRes = await getFrontUserDetail();
    if (userDetailRes.code === 200 && userDetailRes.data) {
      // 更新用户信息，合并localStorage中的基本信息和API返回的详细信息
      userInfo.value = {
        ...userInfo.value,
        ...userDetailRes.data
      };
      
      // 将用户信息同步到localStorage和Pinia store
      localStorage.setItem('frontUserInfo', JSON.stringify(userInfo.value));
      frontUserStore.userInfo = userInfo.value;
      
      // 从用户详情中提取订单数和电子票数
      if (userDetailRes.data.ordersCount !== undefined && userDetailRes.data.ticketsCount !== undefined) {
        userStats.value = {
          ordersCount: userDetailRes.data.ordersCount,
          ticketsCount: userDetailRes.data.ticketsCount
        };
      }
      
      console.log('用户详细信息获取成功:', userInfo.value);
      console.log('用户统计数据:', userStats.value);
    } else {
      console.warn('用户详细信息获取失败:', userDetailRes);
      
      // 当后端接口不可用时，从localStorage获取数据
      const storedUserInfo = localStorage.getItem('frontUserInfo');
      if (storedUserInfo) {
        userInfo.value = JSON.parse(storedUserInfo);
        console.log('使用本地存储的用户信息:', userInfo.value);
      }
      
      // 使用默认统计数据
      userStats.value = {
        ordersCount: 0,
        ticketsCount: 0
      };
    }
    
    // 使用空订单列表
    orders.value = [];
    
  } catch (error) {
    console.error('获取用户数据失败:', error);
    ElMessage.error('获取用户数据失败，请稍后再试');
    
    // 使用默认数据
    userStats.value = {
      ordersCount: 0,
      ticketsCount: 0
    };
    orders.value = [];
  }
}

// 编辑个人资料
const editProfile = () => {
  // 填充表单数据
  Object.keys(profileForm).forEach(key => {
    profileForm[key] = userInfo.value[key] || '';
  });
  
  // 显示对话框
  profileDialog.value = true;
}

// 提交资料更新
const submitProfileUpdate = () => {
  profileFormRef.value.validate(async (valid) => {
    if (valid) {
      updateLoading.value = true;
      try {
        // 处理兴趣爱好默认值
        if (!profileForm.interests || profileForm.interests.trim() === '') {
          const defaultInterests = ['音乐', '讲座', '运动'];
          // 随机选择一个兴趣爱好
          const randomIndex = Math.floor(Math.random() * defaultInterests.length);
          profileForm.interests = defaultInterests[randomIndex];
          console.log('使用随机兴趣爱好:', profileForm.interests);
        }
        
        const res = await updateFrontUserProfile(profileForm);
        
        if (res.code === 200) {
          ElMessage.success('个人资料更新成功');
          profileDialog.value = false;
          
          // 更新本地用户信息
          Object.keys(profileForm).forEach(key => {
            userInfo.value[key] = profileForm[key];
          });
          
          // 更新localStorage和Pinia store
          localStorage.setItem('frontUserInfo', JSON.stringify(userInfo.value));
          frontUserStore.userInfo = userInfo.value;
        } else {
          ElMessage.error(res.msg || '更新失败，请稍后再试');
        }
      } catch (error) {
        console.error('更新个人资料失败:', error);
        ElMessage.error('更新失败，请稍后再试');
      } finally {
        updateLoading.value = false;
      }
    }
  });
}

// 修改密码
const changePassword = () => {
  passwordDialog.value = true
}

// 提交密码修改
const submitPasswordChange = () => {
  passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await changeFrontUserPassword({
          oldPassword: passwordForm.oldPassword,
          newPassword: passwordForm.newPassword
        });
        
        if (res.code === 200) {
          ElMessage.success('密码修改成功');
          passwordDialog.value = false;
          
          // 重置表单
          passwordForm.oldPassword = '';
          passwordForm.newPassword = '';
          passwordForm.confirmPassword = '';
        } else {
          ElMessage.error(res.msg || '密码修改失败，请稍后再试');
        }
      } catch (error) {
        console.error('修改密码失败:', error);
        ElMessage.error('修改密码失败，请稍后再试');
      }
    }
  });
}

// 查看订单详情
const viewOrder = (order) => {
  router.push(`/front/user/order-detail?id=${order.id}`)
}

// 获取角色名称
const getRoleName = (role) => {
  const roleMap = {
    'admin': '管理员',
    'user': '普通用户',
    'guest': '游客'
  }
  return roleMap[role] || '普通用户'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '暂无数据'
  const d = new Date(date)
  return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
}

// 手机号码脱敏
const maskPhone = (phone) => {
  if (!phone) return '暂无数据'
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'success',
    3: 'info'
  }
  return typeMap[status] || 'info'
}

// 前往登录页
const goToLogin = () => {
  router.push({
    path: '/front/login',
    query: { redirect: route.fullPath }
  })
}

// 处理菜单选择
const handleMenuSelect = (key) => {
  if (key === 'profile') {
    activeMenuItem.value = 'profile'
  } else if (key === 'orders') {
    // 跳转到订单列表页面
    router.push('/front/user/orders')
  } else if (key === 'tickets') {
    // 跳转到电子票列表页面
    router.push('/front/user/tickets')
  }
}

// 获取性别文本
const getGenderText = (gender) => {
  const genderMap = {
    'male': '男',
    'female': '女', 
    'secret': '保密'
  }
  return genderMap[gender] || '保密'
}
</script>

<style scoped>
.user-profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
}

.user-profile-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/3.png') no-repeat center center;
  background-size: cover;
  opacity: 0.05;
  z-index: -1;
}

.page-title {
  font-size: 40px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 40px;
  letter-spacing: -0.5px;
}

.not-logged-in-card {
  background: #fbfbfd;
  border: none;
  border-radius: 20px;
  padding: 40px;
}

.user-card {
  border: none;
  border-radius: 20px;
  background: #fbfbfd;
  margin-bottom: 24px;
  overflow: hidden;
}

.user-header {
  text-align: center;
  padding: 32px 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.username {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 16px 0 8px;
}

.user-role {
  font-size: 14px;
  color: #86868b;
  margin: 0;
}

.user-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  margin: 0 16px 24px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #86868b;
}

.action-buttons {
  padding: 0 24px 24px;
  display: flex;
  gap: 12px;
}

.action-buttons :deep(.el-button) {
  flex: 1;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 20px;
}

.action-buttons :deep(.el-button--primary) {
  background: #5e5ce6;
  border-color: #5e5ce6;
}

.action-buttons :deep(.el-button--primary:hover) {
  background: #6b69e3;
  border-color: #6b69e3;
}

.menu-card {
  border: none;
  border-radius: 20px;
  background: #fbfbfd;
  overflow: hidden;
}

.user-menu {
  border: none;
  background: transparent;
}

.user-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  color: #1d1d1f;
}

.user-menu :deep(.el-menu-item.is-active) {
  background: rgba(94, 92, 230, 0.1);
  color: #5e5ce6;
}

.user-menu :deep(.el-menu-item:hover) {
  background: rgba(0, 0, 0, 0.03);
}

.user-menu :deep(.el-icon) {
  font-size: 18px;
  margin-right: 12px;
}

.content-card {
  border: none;
  border-radius: 20px;
  background: #fbfbfd;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.card-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.content-card :deep(.el-descriptions) {
  padding: 24px;
}

.content-card :deep(.el-descriptions__label) {
  color: #86868b;
  font-weight: normal;
}

.content-card :deep(.el-descriptions__content) {
  color: #1d1d1f;
}

.content-card :deep(.el-table) {
  background: transparent;
}

.content-card :deep(.el-table th) {
  background: #f5f5f7;
  font-weight: 600;
  color: #1d1d1f;
}

.content-card :deep(.el-table td) {
  color: #1d1d1f;
}

.content-card :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background: rgba(0, 0, 0, 0.02);
}

.price-text {
  color: #5e5ce6;
  font-weight: 600;
}

.empty-data {
  padding: 40px;
  text-align: center;
}

.empty-description {
  color: #86868b;
  margin: 8px 0 16px;
}

:deep(.el-dialog) {
  border-radius: 20px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

:deep(.el-form-item__label) {
  color: #1d1d1f;
  font-weight: 500;
}

.form-tip {
  font-size: 12px;
  color: #86868b;
  margin-top: 4px;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background: rgba(0, 0, 0, 0.03);
  border: none;
  box-shadow: none !important;
  border-radius: 10px;
}

:deep(.el-input__wrapper:hover),
:deep(.el-select .el-input__wrapper:hover) {
  background: rgba(0, 0, 0, 0.05);
}

:deep(.el-input__inner) {
  color: #1d1d1f;
}

@media (max-width: 768px) {
  .user-profile-container {
    padding: 20px;
  }

  .page-title {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .user-card,
  .menu-card,
  .content-card {
    margin-bottom: 16px;
  }

  .user-stats {
    margin: 0 12px 20px;
  }

  .action-buttons {
    padding: 0 20px 20px;
  }
}
</style> 